<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程视频</title>
</head>

<body class="dpflex fdc por">
    <!-- 视频播放区域 -->
    <div class="video-box flex1 dpflex fdc">
        <p><video class="video" id="video" autoplay muted></video></p>
        <div class="course-introduce dpflex fdc">
            <p class="course-chapter"><span id="currentNum"></span>/<span id="totalNum"></span></p>
            <p class="course-text" id="titleName"></p>
        </div>
    </div>

    <!-- 尾部 进度条&控制条 -->
    <div class="footer por">
          <!-- 进度条 -->
        <p class="progress" id="progress"></p>
        <!-- 控制条 -->
        <div class="control dpflex pof">
            <i class="iconfont icon-shangyijie" id="iconPre"></i>
            <i class="iconfont icon-stop" id="iconStop"></i>
            <i class="iconfont icon-xiayijie" id="iconNext"></i>
        </div>
    </div>

    <!-- 蒙层 -->
    <div class="mantle pof" id="mantle">
        <h4>放弃可以找到一万个理由,坚持只需要一个信念</h4>
        <div class="all-btns dpflex">
            <p class="btn continue-btn dpflex fdc" id="continueBtn">
                <i class="iconfont icon-jixu"></i>
                <span>继续训练</span>
            </p>
            <p class="btn end-btn dpflex fdc" id="endBtn">
                <i class="iconfont icon-end"></i>
                <span>结束训练</span>
            </p>
            <div class="curr-course clearfix">
                <img alt="" class="fl" id="curImg">
                <p class="text fr">
                    <span>当前：</span><br>
                    <span id="curTitle"></span>
                </p>
            </div>
        </div>
    </div>

    <!--  引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>